<template>
  <el-dialog v-model="dialogVisible" title="管理服务内容" width="70%">
    <div class="box">
      <div style="display: flex">
        <div class="left">
          <el-button type="primary" icon="plus" @click="adddialogVisible">添加</el-button>
          <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">
            <el-menu-item v-for="(item, index) in serviceRelList" :key="item.id" :index="index.toString()">
              <span>{{ item.name }}</span>
              <el-icon @click.stop="deleteServiceRel"><CloseBold /></el-icon>
            </el-menu-item>
          </el-menu>
        </div>
        <div class="right">
          <div v-if="addServiceItem" id="addServiceItem" class="editServiceItem" style="display: block">
            <div class="alert alert-info" role="alert">支持一次性最多填写5条数据，每一条数据中“服务项”是必填</div>
            <form method="post" theme="simple">
              <input type="hidden" name="id" value="${exhID!}" />
              <input type="hidden" name="serviceID" value="${serviceID!}" />
              <table class="table">
                <tr>
                  <th>服务项（必填）</th>
                  <th>单价</th>
                  <th>押金</th>
                </tr>

                <tr>
                  <td><input type="text" name="exhServiceSpecList[${item_index}].name" class="input-small" /></td>
                  <td><input type="number" name="exhServiceSpecList[${item_index}].price" class="input-small" min="0" placeholder="默认0" /></td>
                  <td><input type="number" name="exhServiceSpecList[${item_index}].deposit" class="input-small" min="0" placeholder="默认0" /></td>
                </tr>
              </table>
            </form>
            <div class="two-btn">
              <button type="submit" class="baocun">
                <span
                  ><el-icon><Select /></el-icon></span
                >&nbsp;保存
              </button>
              <button type="button" class="baocun quxiao">
                <span
                  ><el-icon :size="20"><CloseBold /></el-icon></span
                >&nbsp;取消
              </button>
            </div>
            <hr />
          </div>
          <div>
            <h4>服务描述</h4>
            <el-form>
              <el-form-item label="">
                <el-input type="textarea" v-model="selectedServiceRel.introduce" />
              </el-form-item>
            </el-form>
            <div style="margin-bottom: 15px">
              <el-button type="primary" icon="select">保存服务描述</el-button>
            </div>
          </div>
          <el-button type="primary" icon="plus">添加服务项</el-button>
          <el-table :data="selectedServiceRel.texhServiceSpecList" border :header-cell-style="{ background: '#000', color: '#000' }" style="width: 100%">
            <el-table-column prop="name" label="服务项" header-align="center" align="center"></el-table-column>
            <el-table-column prop="price" label="单价" header-align="center" align="center"></el-table-column>
            <el-table-column prop="deposit" label="押金" header-align="center" align="center"></el-table-column>

            <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
              <template v-slot="scope">
                <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
                <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <texhServiceAdd :exhId="exhId" ref="texhServiceAdd" @updateServiceRelList="getServiceRelList(exhId)"></texhServiceAdd>
    </div>
  </el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
import baseService from "@/service/baseService";
import texhServiceAdd from "./texh-service-add.vue";
interface serviceSpec {
  id: string;
  name: string;
  price: number;
  deposit: number;
}
interface serviceRel {
  id: string;
  introduce: string;
  name: string;
  texhServiceSpecList: Array<serviceSpec>;
}
interface service {
  id: string;
  name: string;
}
export default defineComponent({
  components: {
    texhServiceAdd
  },
  props: ["exhId"],
  setup() {
    return reactive({
      hoverIndex: -1,
      arr: {},
      addServiceItem: false,
      serviceRelList: [] as serviceRel[],
      selectedServiceRel: {} as serviceRel,
      serviceList: [] as service[]
    });
  },

  data() {
    return {
      dialogVisible: false,
      activeIndex: "0",
      serviceRel: {
        exhServiceId: "",
        exhId: "",
        introduce: ""
      }
    };
  },
  watch: {
    dialogVisible(newValue, oldValue) {
      if (newValue) {
        this.getServiceRelList(this.exhId);
      }
    },
    activeIndex(newValue, oldValue) {
      this.selectedServiceRel = this.serviceRelList[newValue];
    },
    exhId(newValue, oldValue) {
      this.serviceRel.exhId = newValue;
    }
  },
  methods: {
    handleSelect(key: string) {
      this.activeIndex = key;
    },
    adddialogVisible() {
      this.$refs.texhServiceAdd.dialogVisible = true;
    },
    add() {
      this.addServiceItem = true;
    },
    getServiceRelList(id: string) {
      if (id) {
        baseService.get(`/noc/texhservicerel/listByExhId/${this.exhId}`).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.serviceRelList = res.data;
          this.selectedServiceRel = this.serviceRelList[0];
        });
      }
    },
    deleteServiceRel() {
      this.$message.success("删除成功");
    }
  }
});
</script>
<style lang="less" scoped>
.box {
  border: 1px solid #ddd;
  .heaher {
    height: 37px;
    background: #d9edf7;
    text-align: center;
    line-height: 37px;
    font-weight: 700;
    border: 1px solid #ddd;
  }
  .left {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    .el-menu-item span {
      color: black;
    }
    .is-active span {
      color: #17b3a3;
    }
  }
  .right {
    flex: 4;
    border: 1px solid #ddd;
    margin: 6px;
    padding: 10px;
    .two-btn {
      display: flex;
      justify-content: center;
      border-top: 1px solid #dddddd;
      padding: 8px;
      vertical-align: middle;
    }
    .table {
      width: 100%;
    }
    th {
      border-top: 1px solid #ddd;
      width: 33%;
      text-align: left;
      padding-left: 8px;
      height: 35px;
    }
    td {
      padding: 8px;
      /* line-height: 1.42857143; */
      border-top: 1px solid #ddd;
    }
  }
}

.baocun {
  display: flex;
  align-items: center;
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
  border-radius: 6px;
  height: 34px;
  font-style: 20px;
  border-color: rgba(200, 200, 200, 0.5);
}
.quxiao {
  margin-left: 5px;
}

.add {
  height: 45px;
  padding: 4px;
  border: 1px solid #ddd;
  margin-bottom: 30px;
}
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
</style>
